<?php
include ('common/constants.php');
include ('common/db.php');
session_start();

if ((!isset($_SESSION['user_email'])) || ($_SESSION['user_email']=='')) {
  header('location: login.php');
}
?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Carpooling - Advertise</title>
<link href="resources/css/bootstrap.min.css" rel="stylesheet">
<link href="resources/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="resources/css/datepicker.css" rel="stylesheet">
<link href="resources/css/jquery.timepicker.css" rel="stylesheet">

<script type="text/javascript" src="resources/js/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<style type="text/css">
	.cus_row {
		-moz-box-sizing: border-box;
		float:left;
		min-height: 1px;
		padding-right: 15px;
		position: relative;
	}
	body {
		padding-top: 40px;
		padding-bottom: 40px;
		background-color: #f5f5f5;
	}
		
	#map-canvas {
		height: 100%;
		margin: 0px;
		padding: 0px
	}
</style>
</head>

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container"> 
    	<a class="btn btn-navbar" style="margin-top: 25px;" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
      	</a> <a class="brand" style="text-align:center;" href="home.php"><img src="resources/icons/share_ride.png" style="max-width:55px; padding-right:15px"/>Carpooling.lk</a>
      <div class="nav-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active" style="text-align:center; float:left">
          	<a href="advertise.php"><img src="resources/icons/speaker.png" style="max-width:40px; min-width: 20px;"/><br/>Advertise</a>
          </li>
          <li style="text-align:center; float:left">
          	<a href="publish.php"><img src="resources/icons/publish.png" style="max-width:40px; min-width: 20px;"/><br />Publish</a>
          </li>
          <li style="text-align:center; float:left">
          	<a href="#notifPanel" data-toggle="modal"><img src="resources/icons/notification.png" style="max-width:40px; min-width: 20px;"/><br />Notifications</a>
          </li>
          <li style="text-align:center; float:left">
          	<a href="my_posts.php"><img src="resources/icons/my_posts.png" style="max-width:40px; min-width: 20px;"/><br />My Posts</a>
          </li>
          <li style="text-align:center; float:left">
          	<a href="user_details.php"><img src="resources/icons/user_details.png" style="max-width:40px; min-width: 20px;"/><br />User Details</a>
          </li>
          <li style="text-align:center; float:left">
          	<a href="preferences.php"><img src="resources/icons/preferences.png" style="max-width:40px; min-width: 20px;"/><br />Preferences</a>
          </li>
          <li style="text-align:center; float:left">
          	<a data-toggle="collapse" data-target="#srch_panel"><img src="resources/icons/search.png" style="max-width:40px; min-width: 20px;"/><br />Search</a>
          </li>
          <li style="text-align:center; float:left; line-height: 0px; max-width: 200px;">
            &nbsp;&nbsp;<a class="" data-toggle="collapse"><h4>Hi <?php echo $_SESSION['user_name']?></h4></a><br />
          </li>
          <li style="text-align:center; float:left">
            &nbsp;&nbsp;<a style="padding:20px; margin: 0;" href="login.php">Sign Out</a>
          </li>
        </ul>

      </div>

	  <!-- Search Panel -->
  	  <div id="includedSrchPanel" class="cus_row" style="width:100%"></div>
    </div>

  </div>

</div>

<div style="height:84px"></div>

<div class="container">
  <h1>Advertise</h1>
    <form class="form-actions" name="advert" id="advert">
        <fieldset>
          <legend>Advertise Your Seats</legend>
          <div class="control-group">
             <div style="width:100%;">
                <div class="cus_row" style="width:30%;">
                    <label class="control-label" for="origin">Origin</label>
                    <div class="controls">
					<input id="origin" type="text" data-provide="typeahead" autocomplete="off" data-items="4" name="origin" data-source='["Colombo 1", "Colombo 2", "Colombo 3", "Colombo 4", "Colombo 5", "Colombo 6", "Colombo 7", "Colombo 8", "Colombo 9", "Colombo 10", "Colombo 11" ,"Colombo 12" ,"Colombo 13" ,"Colombo 14" ,"Colombo 15" ,"Athurugiriya" ,"Attidiya" ,"Battaramulla" ,"Biyagama" ,"Boralesgamuwa" ,"Dehiwala" ,"Galle" ,"Gampaha" ,"Ja-Ela" ,"Jawatta" ,"Jayawardanapura" ,"Kadawatha" ,"Kalalgoda" ,"Kalapaluwawa" ,"Kalubowila" ,"Kandana" ,"Kandy" ,"Katunayaka" ,"Kelaniya" ,"Kiribathgoda" ,"Kirulapone" ,"Kohuwala" ,"Kolonnawa" ,"Kottawa" ,"Kotte" ,"Kurunegala" ,"Mahabage" ,"Maharagama" ,"Malabe" ,"Matara" ,"Moratuwa" ,"Mount Lavinia" ,"Mulleriyawa" ,"Nawala" ,"Negombo" ,"Nugegoda" ,"Panadura" ,"Pannipitiya" ,"Peliyagoda" ,"Pepiliyana" ,"Polgasowita" ,"Ragama" ,"Rajagiriya" ,"Ratmalana" ,"Seeduwa" ,"Thalawatugoda" ,"Union Place" ,"Wattala"]'>
                   </div>
                </div>
                <div class="cus_row" style="width:70%;">
                    <label class="control-label" for="destination">Destination</label>
                    <div class="controls">
                       <input id="destination" type="text" data-provide="typeahead" autocomplete="off" data-items="4" name="destination" data-source='["Colombo 1", "Colombo 2", "Colombo 3", "Colombo 4", "Colombo 5", "Colombo 6", "Colombo 7", "Colombo 8", "Colombo 9", "Colombo 10", "Colombo 11" ,"Colombo 12" ,"Colombo 13" ,"Colombo 14" ,"Colombo 15" ,"Athurugiriya" ,"Attidiya" ,"Battaramulla" ,"Biyagama" ,"Boralesgamuwa" ,"Dehiwala" ,"Galle" ,"Gampaha" ,"Ja-Ela" ,"Jawatta" ,"Jayawardanapura" ,"Kadawatha" ,"Kalalgoda" ,"Kalapaluwawa" ,"Kalubowila" ,"Kandana" ,"Kandy" ,"Katunayaka" ,"Kelaniya" ,"Kiribathgoda" ,"Kirulapone" ,"Kohuwala" ,"Kolonnawa" ,"Kottawa" ,"Kotte" ,"Kurunegala" ,"Mahabage" ,"Maharagama" ,"Malabe" ,"Matara" ,"Moratuwa" ,"Mount Lavinia" ,"Mulleriyawa" ,"Nawala" ,"Negombo" ,"Nugegoda" ,"Panadura" ,"Pannipitiya" ,"Peliyagoda" ,"Pepiliyana" ,"Polgasowita" ,"Ragama" ,"Rajagiriya" ,"Ratmalana" ,"Seeduwa" ,"Thalawatugoda" ,"Union Place" ,"Wattala"]'>
                   </div>
                </div> 
              </div>
              
              <div id="route-controls" class="cus_row" style="width:100%; padding-left: 0px;">
              	<div class="alert alert-info"><strong>Note : </strong>Travel route can be generated on map based on above provided Origin and Destination. Route can be modified by dragging waypoints, and should be confirmed before completing the advertising process.</div>
              	<div id="div-draw-route" style="float:left;"><button type="button" class="btn" id="draw-route">Define Driving Directions</button></div>
                <div id="div-hide-route" style="float:left;"><button type="button" class="btn" id="hide-route">Collapse Route Panel</button></div>
                <div id="div-reset-route" style="float:left;"><button type="button" class="btn" id="reset-route">Reset Route</button></div>
                <div id="div-save-route" style="float:left;"><button type="button" class="btn" id="save-route">Confirm Directions</button></div>
                <div id="div-load-route" style="float:left;"><button type="button" class="btn" id="load-route">Optimize & Load Modified Route</button></div>
              </div>
              
              <div id="drawRoutePanel" style="float:left; width:100%;">
              	<?php include("drawRoute.php"); ?>
              </div>
              <input type="hidden" name="route_distance" id="route_distance" value="" />
              <input type="hidden" name="route_string" id="route_string" value="" />
          
              <input type="hidden" name="advertisement_type" id="advertisement_type" value="advert" /> 
              <input type="hidden" name="email" id="email" value="<?php echo $_SESSION['user_email']?>" /> 
              <div style="width:100%;">
                <div class="cus_row" style="width:30%; padding-top:10px;">
                    <label class="checkbox">
                        <input type="checkbox" id="split_cost" name="split_cost" value="Y" checked>
                        Split Cost
                    </label>
                </div>
                <div class="cus_row" style="width:70%; padding-top:10px;">
                    <label class="checkbox">
                        <input type="checkbox" id="take_turns" name="take_turns" value="Y">
                        Take Turns
                    </label>	
                </div>
              </div>
              
              <div>
                <div class="cus_row" style="width:100%; padding-top:10px;">
                    <label class="sr-only" for="travel_date">Travel Date</label>
                    <input id="travel_date" name="travel_date" type="text" data-date-format="yyyy-mm-dd" class="datepicker" style="width:80px;" />
                </div>
              </div>

            <h3 class="cus_row" style="width:100%;">OR</h3>
            
            <div>
                <div class="cus_row" style="width:30%;">
                    <label class="radio"><input type="checkbox" name="daily" id="daily" value="Y" checked>Daily</label>
                    <label class="radio"><input type="checkbox" name="weekly" id="weekly" value="Y">Weekly</label>
                    <label class="radio"><input type="checkbox" name="monthly" id="monthly" value="Y">Monthly</label>
                </div>
                <div class="cus_row" style="width:10%;">
                    <label class="checkbox"><input type="checkbox" name="mon" id="mon" name="mon" value="Y">Mon</label>
                    <label class="checkbox"><input type="checkbox" name="tue" id="tue" name="tue" value="Y">Tue</label>
                    <label class="checkbox"><input type="checkbox" name="wed" id="wed" name="wed" value="Y">Wed</label>
                </div>
                <div class="cus_row" style="width:10%;">
                    <label class="checkbox"><input type="checkbox" name="thu" id="thu" name="thu" value="Y">Thu</label>
                    <label class="checkbox"><input type="checkbox" name="fri" id="fri" name="fri" value="Y">Fri</label>
                    <label class="checkbox"><input type="checkbox" name="sat" id="sat" name="sat" value="Y">Sat</label>
                </div>
                <div class="cus_row" style="width:10%;">
                    <label class="checkbox"><input type="checkbox" name="sun" id="sun" name="sun" value="Y">Sun</label>
                </div>
                <div class="cus_row" style="width:40%;">
                    
                </div>
            </div>

            <label class="control-label cus_row"  style="width:100%; padding-top:10px"><strong>Time :</strong></label>
            <div style="width:100%;">
                <div class="cus_row" style="width:30%;">
                   <label class="sr-only" for="origin_time">From Origin</label>
                   <div class="input-append">
                        <input id="origin_time" name="origin_time" type="text" class="input-small" style="width:70px;">
                        <span class="add-on"><i class="icon-time"></i></span>
                    </div>
                </div>

                <div class="cus_row" style="width:70%;">
                    <label class="sr-only" for="dest_time">From Destination</label>
                    <div class="input-append">
                        <input id="dest_time" name="dest_time" type="text" class="input-small" style="width:70px;">
                        <span class="add-on"><i class="icon-time"></i></span>
                    </div>
                </div>

              </div>
              <label class="control-label cus_row"  style="width:100%; padding-top:10px"><strong>Average Estimations :</strong></label>
              <div style="width:100%;">
                <div class="cus_row" style="width:30%;">
                        <label class="sr-only" for="dest_time">One-way Distance (Km)</label>
                        <div class="input-append">
                            <input id="travel_distance" name="travel_distance" type="text" class="distance input-small" style="width:70px;">
                        </div>
                </div>
				<div class="cus_row" style="width:70%;">
                    <label class="sr-only" for="dest_time">One-way Duration (Hrs)</label>
                    <div class="input-append">
                        <input id="travel_duration" name="travel_duration" type="text" class="input-small" style="width:70px;">
                    </div>
				</div>
              </div>
			  <div>
                <div class="cus_row" style="width:100%; padding-top:10px;">
                    <label class="sr-only" for="price_per_seat">Price per Seat-trip</label>
                    <input id="price_per_seat" name="price_per_seat" type="text" style="width:80px;" />
                </div>
              </div>
              <div style="width:100%;">
                <div class="cus_row" style="width:30%;">
                    <label class="control-label" for="vehicle_type_id">Vehicle Type</label>
                    <div class="controls" style="width:auto">
                        <select id="vehicle_type_id" name="vehicle_type_id" style="width:auto;">
                            <option value="1">Car</option>
                            <option value="2">Van</option>
                            <option value="3">Double Cab</option>
                            <option value="4">Bus</option>
                        </select>
                    </div>
                </div>
                <div class="cus_row" style="width:70%;">
                    <label class="control-label" for="numOfSeats">Number Of Seats</label>
                    <div class="controls">
                        <select id="numOfSeats" name="numOfSeats" style="width:60px;">
                           <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                        </select>
                    </div>
                </div>
              </div>

          <div class="form-actions cus_row" style="width:100%; padding-left: 0px;">
            <button type="button" class="btn btn-large btn-primary" id="advertise-btn">Advertise</button>
          </div>
        </fieldset>

    </form>
    
    <!-- Notification Panel -->
  	<div id="includedNotifPanel"></div>

  	<!-- Site footer -->
    <div class="navbar navbar-inverse navbar-fixed-bottom">
    	<div class="navbar-inner"> <a class="brand" href="#" style="padding-left:7%">&copy; Carpooling.lk 2013</a> </div>
    </div>
</div>
<!-- JAVASCRIPT INCLUDES -->
<script type="text/javascript" src="resources/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="resources/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="resources/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="resources/js/bootstrap-collapse.js"></script>
<script type="text/javascript" src="resources/js/bootstrap-typeahead.js"></script>
<script type="text/javascript" src="resources/js/jquery.timepicker.js"></script>
<script type="text/javascript" src="common/admin.js"></script>

<script type="text/javascript">
	var orig = "";
	var dest = "";
	
	function isDigit(inputVal)  {
		var pattern = /^\d+(?:\.\d+)?$/;  
		if(pattern.test(inputVal)) {  
			return true;    
		} else {  
			return false;  
		}
	}
	
	//Include Search panel
	$(function(){
      $("#includedSrchPanel").load("search_panel.php"); 
      
    });

	$(function() {
    $('#travel_date').datepicker();
    //$('#travel_date').datepicker( "option", "dateFormat", "yy-mm-dd" );

		$('#origin_time').timepicker({ 'scrollDefaultNow': true });
		$('#dest_time').timepicker({ 'scrollDefaultNow': true });
	});
	//Include Notification panel
	$(function(){
      $("#includedNotifPanel").load("notification_panel.php"); 
    });

	
 	function submitForm(){
      jQuery.ajax({
        url: 'saveAdvert.php',
        type: "POST",
        data: $('#advert').serialize(),
        success: function(data) {
          if(data=="success"){
            alert("Advertisement saved.");
            location.href="my_posts.php";
          }else{  alert(data); }
        }
      });
    }

    $("#advertise-btn").bind('click', function(){
		//JS validations				   
		if(!isDigit($("#travel_distance").val())){
		  alert("Please enter a valid decimal value as distance.");
		  $("#travel_distance").focus();
		} else if(!isDigit($("#travel_duration").val())){
		  alert("Please enter a valid decimal value as duration.");
		  $("#travel_duration").focus();
		} else if(!isDigit($("#price_per_seat").val())){
		  alert("Please enter a valid decimal value as the seat price.");
		  $("#price_per_seat").focus();
		} else {
			$("#route_string").val(tempRoute);
        	submitForm();
		}
		
    });
	
	$(function(){
        $("#drawRoutePanel").hide();
		$("#div-hide-route").hide();
		$("#div-save-route").hide();
		$("#div-load-route").hide();
		$("#div-reset-route").hide();

    });
	
	$("#draw-route").bind('click', function(){
		$("#drawRoutePanel").show();
		orig = $('#origin').val();
		dest = $('#destination').val();
		initialize(orig, dest);
		$("#div-hide-route").show();
		$("#div-save-route").show();
		$("#div-draw-route").hide();
		$("#div-reset-route").show();
    });
	
	$("#reset-route").bind('click', function(){
		$("#drawRoutePanel").show();
		orig = $('#origin').val();
		dest = $('#destination').val();
		initialize(orig, dest);
		$("#div-save-route").show();
		$("#div-hide-route").show();
    });
	
	$("#save-route").bind('click', function(){
		save_waypoints();
		$("#div-load-route").show();
		$("#div-hide-route").show();
    });
	
	$("#hide-route").bind('click', function(){
		$("#drawRoutePanel").hide();
		$("#div-save-route").hide();
		$("#div-hide-route").hide();
		$("#div-load-route").hide();
		$("#div-reset-route").show();
    });

	$("#load-route").bind('click', function(){
		$("#drawRoutePanel").show();
		loadSavedRoute();
		$("#div-load-route").hide();
		$("#div-save-route").show();
    });

</script>
</body>
</html>